<!-- This file needs to be hosted on an external server.  -->
<html>

<head>
<script language="JavaScript">

function point_it(event){
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	document.getElementById("dot").style.left = (pos_x-8) ;
	document.getElementById("dot").style.top = (pos_y-8) ;
	document.getElementById("dot").style.visibility = "visible" ;
	document.mturk_form.form_x.value = pos_x;
	document.mturk_form.form_y.value = pos_y;
}
//
// adding the current point location as a tag
//

function addTag() {
	x = document.mturk_form.form_x.value;
	y = document.mturk_form.form_y.value;
	if (x == "" || y == "") return;
	for (i=1; i<=10; i++){
		var cur_tag = document.getElementById("tag"+i);
		if(cur_tag.style.visibility == "hidden") {
			document.getElementById("tag"+i).value = "" + x + "," + y;
			document.getElementById("tag"+i).style.visibility = "visible";
			document.getElementById("remove"+i).style.visibility = "visible";
			
			// we need to update the dot display for this tag
			document.getElementById("dot"+i).style.left = (x-8) - i*20 ;
			document.getElementById("dot"+i).style.top = (y-8) ;
			document.getElementById("dot"+i).style.visibility = "visible" ;
			
			break;
		}
		
	}
	
}

function removeTag(idx) {
	document.getElementById("tag"+idx).value = "";
	document.getElementById("tag"+idx).style.visibility = "hidden";
	document.getElementById("remove"+idx).style.visibility = "hidden";
	document.getElementById("dot"+idx).style.left = 0;
	document.getElementById("dot"+idx).style.top = 0;
	document.getElementById("dot"+idx).style.visibility = "hidden";
}

//
// This method Gets URL Parameters (GUP)
//
function gup( name )
{
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )
    return "";
  else
    return results[1];
}

//
// This method decodes the query parameters that were URL-encoded
//
function decode(strToDecode)
{
  var encoded = strToDecode;
  return unescape(encoded.replace(/\+/g,  " "));
}

</script>
</head>
<body>
<form id="mturk_form" name="mturk_form" method="POST" action="http://www.mturk.com/mturk/externalSubmit">
<input type="hidden" id="assignmentId" name="assignmentId" value="">

<h1>Find the people in this scene and tag them</h1>
<p>
<ul>
<li>Count the number of people and enter the number.</li>
<li>Click anywhere on the image to get a red dot.</li>
<li>Press "Add a tag" to tag the spot. The dot should turn green.</li>
<li>Try your best to place the dot at the center of each person.</li>
</ul>
<p>
Number of people:<input type="text" name="number" size=20><br />
Point location - x: <input type="text" id="form_x" name="form_x" size="4" />  y: <input type="text" id="form_y" name="form_y" size="4" /><button type="button" name="tag" onClick="javascript:addTag()">Add a tag</button>

<div style="width:800px;height:auto;">
<div id="pointer_div" onClick="point_it(event)" style = "background-image:url('http://students.cec.wustl.edu/~bc17/img/amos/20060304_120200.jpg');width:352px;height:240px;float:left;">
<img src="dot.png" id="dot" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot1" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot2" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot3" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot4" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot5" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot6" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot7" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot8" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot9" style="position:relative;visibility:hidden;z-index:2;">
<img src="dot_green.png" id="dot10" style="position:relative;visibility:hidden;z-index:2;">
</div>
<div style="clear:right">
Tagged:<br />
<input type="text" id="tag1" name="tag1" size="8" style="visibility:hidden"><button type="button" id="remove1" style="visibility:hidden" onClick="javascript:removeTag('1')">Remove</button><br />
<input type="text" id="tag2" name="tag2" size="8" style="visibility:hidden"><button type="button" id="remove2" style="visibility:hidden" onClick="javascript:removeTag('2')">Remove</button><br />
<input type="text" id="tag3" name="tag3" size="8" style="visibility:hidden"><button type="button" id="remove3" style="visibility:hidden" onClick="javascript:removeTag('3')">Remove</button><br />
<input type="text" id="tag4" name="tag4" size="8" style="visibility:hidden"><button type="button" id="remove4" style="visibility:hidden" onClick="javascript:removeTag('4')">Remove</button><br />
<input type="text" id="tag5" name="tag5" size="8" style="visibility:hidden"><button type="button" id="remove5" style="visibility:hidden" onClick="javascript:removeTag('5')">Remove</button><br />
<input type="text" id="tag6" name="tag6" size="8" style="visibility:hidden"><button type="button" id="remove6" style="visibility:hidden" onClick="javascript:removeTag('6')">Remove</button><br />
<input type="text" id="tag7" name="tag7" size="8" style="visibility:hidden"><button type="button" id="remove7" style="visibility:hidden" onClick="javascript:removeTag('7')">Remove</button><br />
<input type="text" id="tag8" name="tag8" size="8" style="visibility:hidden"><button type="button" id="remove8" style="visibility:hidden" onClick="javascript:removeTag('8')">Remove</button><br />
<input type="text" id="tag9" name="tag9" size="8" style="visibility:hidden"><button type="button" id="remove9" style="visibility:hidden" onClick="javascript:removeTag('9')">Remove</button><br />
<input type="text" id="tag10" name="tag10" size="8" style="visibility:hidden"><button type="button" id="remove10" style="visibility:hidden" onClick="javascript:removeTag('10')">Remove</button><br />
</div>
</div>
<p>
<input id="submitButton" type="submit" name="Submit" value="Submit HIT">
<p>
</form>
<script language="Javascript">
	new_image = "url(" + decode(gup('url')) + ")";
    document.getElementById('pointer_div').style.backgroundImage = new_image;
    document.getElementById('assignmentId').value = gup('assignmentId');


    //
    // Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
    //
    if (gup('assignmentId') == "ASSIGNMENT_ID_NOT_AVAILABLE")
    {
  // If we're previewing, disable the button and give it a helpful message
  document.getElementById('submitButton').disabled = true;
  document.getElementById('submitButton').value = "You must ACCEPT the HIT before you can submit the results.";
    } else {
        var form = document.getElementById('mturk_form');
        if (document.referrer && ( document.referrer.indexOf('workersandbox') != -1) ) {
            form.action = "http://workersandbox.mturk.com/mturk/externalSubmit";
        }
    }

</script>
</body>
</html>
